<template>
  <div class="userobj">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-row :span="5" type="flex" justify="start">
            <el-input placeholder="根据用户名搜索"> </el-input>

            <el-button size="small" class="btn">清空</el-button>

            <el-button type="primary" class="btn" size="small">搜索</el-button>
          </el-row>
        </el-col>

        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="success" size="small" @click="showDialog = true"
              >新增用户</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <el-col class="jilu">
        <i class="el-icon-info" />
        <!-- 定义前面得插槽 -->
        <span>共166条数据</span>
      </el-col>
      <el-table border style="width: 100%">
        <el-table-column fixed prop="date" label="序号" width="150">
        </el-table-column>
        <el-table-column prop="name" label="邮箱" width="120">
        </el-table-column>
        <el-table-column prop="province" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="city" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="权限组名称" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="角色" width="120"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <adduser :show-dialog.sync="showDialog"></adduser>
    <!-- <el-row type="flex" justify="center" align="middle" style="height: 60px">
     
      <el-pagination
        background
        layout="prev, pager, next,pages,jumper"
        :total="10"
      >
      </el-pagination>
    </el-row> -->
  </div>
</template>

<script>
import adduser from "../compoents/adduser.vue";
export default {
  data() {
    return {
      showDialog: false,
      currentPage1: 5,
      currentPage2: 5,
    };
  },
  methods: {},
  components: {
    adduser,
  },
};
</script>

<style>
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
}

.el-input__inner {
  height: 32px;
  line-height: 32px;
  width: 150px;
  margin-right: 10px;
}
.userobj {
  padding: 12px;
}
.jilu {
  margin: 15px 0;
  background: #f4f4f5;
}
.btn {
  height: 32px;
}
</style>